<template>
  <div>
    <h2>{{ msg }}</h2>
    <h3>学生姓名: {{ studentName }}</h3>
    <h3>学生性别: {{ sex }}</h3>
    <h3>学生年龄: {{ myAge }}</h3>
    <!-- 不建议修改接收到的数据，虽然会成功，但是页面会报错提示 -->
    <!-- 如果想要修改，可以另外创建一个属性接收并修改 -->
    <button @click="updateAge">尝试修改收到的年龄数据</button>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Student",
  data() {
    return {
      //这里是写死的方式，无法复用
      msg: "我是一个尚硅谷的学生",
      //创建一个新属性接收数据         注意：props是单向数据流！直接在Vue中修改会警告，可使用自己的data创建新属性接收！！
      myAge: this.age,
    };
  },
  methods: {
    updateAge() {
      //4：修改自己的接收数据的属性
      this.myAge = 22;
    },
  },

  //props内部解析优先级最高，先接收数据！

  //1：简单接收，创建数组接收调用时传递的参数，类似Java提供的构造器，注意可以允许顺序不同
  //props: ["studentName", "age", "sex"],

  //2；规定传参类型，类型错误会报错提示
  /* props: {
    studentName: String,
    sex: String,
    age: Number,
  }, */

  //3：最完整写法，接收数据时单独设置每个字段的约束
  props: {
    studentName: {
      type: String, //指定属性类型
      required: true, //规定为必填项
    },
    sex: {
      type: String,
      required: false, //非必填
    },
    age: {
      type: Number, //规范为数值类型
      default: 99, //默认值，一般不会和必填约束同时出现
    },
  },
};
</script>

<style>
</style>